<template>
  <div class="app-container" v-loading="showLoading">
    <div class="form-card">
      <el-card>
        <div slot="header" class="campany-title">
          <div style="margin-right: 20px;font-weight: bold">
            {{ canpamyName }}
          </div>
          <div>
            <el-tag size="mini" type="primary">{{
              form.entered == 1 ? "已录入" : "未录入"
            }}</el-tag>
          </div>
        </div>
        <div class="file-box">
          <div class="file-box-title">客户征信文件</div>
          <div class="file-box-content">
            <div class="file-left">
              <div class="file-image">
                <img src="@/assets/images/file.jpg" alt="" />
              </div>
              <div class="file-msg">
                <div>征信报告.pdf</div>
              </div>
            </div>
            <div class="file-right">
              <div class="doloadFile" @click="downLoadFile()">下载PDF文件</div>
              <div style="margin-top: 10px">
                <el-button
                  :loading="creditTaskLoading"
                  v-if="haveMsgbtnFlag"
                  @click="creditTask()"
                  style="width: 108px; margin-right: 10px"
                  type="primary"
                  size="mini"
                  v-debounce
                  >解析征信报告</el-button
                >
                <el-button
                  :disabled="editTaskdesable"
                  v-else
                  @click="editTask()"
                  style="width: 108px;"
                  type="primary"
                  size="mini"
                  v-debounce
                  >识别填写征信</el-button
                >
              </div>
            </div>
          </div>
        </div>
      </el-card>
      <!--      基本报告信息-->
      <el-card style="margin-top: 20px; padding-right: 160px">
        <div slot="header" style="text-align: center">
          <div style="margin-right: 20px;font-weight: bold">征信录入</div>
        </div>
        <div style="margin: 10px 0">基本报告信息</div>
        <el-table size="mini" :data="basicReporter" border>
          <el-table-column align="center" label="姓名">
            <template slot-scope="scope">
              <el-input
                size="small"
                v-model="scope.row.name"
                clearable
                placeholder="请输入姓名"
              >
              </el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="证件号码">
            <template slot-scope="scope">
              <el-input
                size="small"
                v-model="scope.row.idCard"
                clearable
                placeholder="请输入证件号码"
              >
              </el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="查询机构">
            <template slot-scope="scope">
              <el-input
                size="small"
                v-model="scope.row.queryAgency"
                clearable
                placeholder="请输入查询结构"
              >
              </el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="查询原因">
            <template slot-scope="scope">
              <el-input
                size="small"
                v-model="scope.row.queryReason"
                clearable
                placeholder="请输入查询原因"
              >
              </el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="查询时间">
            <template slot-scope="scope">
              <el-date-picker
                size="small"
                style="width: 100%"
                v-model="scope.row.reportTime"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!--      信贷交易信息提示-->
      <el-card style="margin-top: 20px; padding-right: 160px">
        <div style="margin: 10px 0">信贷交易信息提示</div>
        <el-table size="mini" :data="creditTradingList" border>
          <el-table-column align="center" label="账户类型" prop="accountType">
            <template slot-scope="scope">
              {{ scope.row.accountType == "loan" ? "贷款" : "信用卡" }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="businessType" label="业务类型">
          </el-table-column>
          <el-table-column label="账户数" align="center">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.accountCount"
                clearable
                type="number"
                placeholder="请输入账户数"
                size="small"
              >
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="首笔业务发放月份" align="center">
            <template slot-scope="scope">
              <el-date-picker
                size="small"
                style="width: 100%"
                value-format="yyyy-MM"
                v-model="scope.row.firstMonth"
                type="month"
                placeholder="选择日期"
              >
              </el-date-picker>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!--      信贷交易违约信息概要-->
      <el-card style="margin-top: 20px; padding-right: 160px">
        <div style="margin: 10px 0">信贷交易违约信息概要</div>
        <div class="table-top-title">
          <span>逾期（透支）信息汇总</span>
        </div>
        <el-table size="mini" :data="creditOverdueList" border>
          <el-table-column prop="accountType" align="center" label="账户类型">
          </el-table-column>
          <el-table-column align="center" label="账户数">
            <template slot-scope="scope">
              <el-input
                size="small"
                v-model="scope.row.accountCount"
                type="number"
                clearable
                placeholder="请输入交易笔数"
              >
              </el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="月份数">
            <template slot-scope="scope">
              <el-input
                size="small"
                v-model="scope.row.overMonth"
                type="number"
                clearable
                placeholder="请输入月份数"
              >
              </el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="单月最高逾期/透支总额">
            <template slot-scope="scope">
              <el-input
                size="small"
                v-model="scope.row.overAmount"
                type="number"
                clearable
                placeholder="请输入单月最高逾期/透支总额"
              >
              </el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="最长逾期/透支月数">
            <template slot-scope="scope">
              <el-input
                size="small"
                v-model="scope.row.overMonthCount"
                type="number"
                clearable
                placeholder="最长逾期/透支月数"
              >
              </el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!--      信贷交易授信及负债信息概要（未结清/未销-->
      <el-card style="margin-top: 20px; padding-right: 160px">
        <div style="margin: 10px 0">
          信贷交易授信及负债信息概要（未结清/未销户）
        </div>

        <div
          style="margin-top: 30px"
          v-for="(item, index) in creditDebtLoopList"
          :key="index + 'a'"
        >
          <div class="table-top-title">
            <span>{{ item.title }}</span>
          </div>
          <el-table size="mini" :data="[item]" border>
            <el-table-column align="center" label="管理机构数">
              <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model="scope.row.agencyCount"
                  type="number"
                  clearable
                  placeholder="请输入机构数"
                >
                </el-input>
              </template>
            </el-table-column>
            <el-table-column align="center" label="账户数">
              <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model="scope.row.accountCount"
                  type="number"
                  clearable
                  place
                />
              </template>
            </el-table-column>
            <el-table-column align="center" label="授信总额">
              <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model="scope.row.creditAmount"
                  type="number"
                  clearable
                  placeholder="授信总额"
                >
                </el-input>
              </template>
            </el-table-column>
            <el-table-column align="center" label="余额">
              <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model="scope.row.balance"
                  type="number"
                  clearable
                  placeholder="负债总额"
                >
                </el-input>
              </template>
            </el-table-column>
            <el-table-column align="center" label="最近6个月平均应还款">
              <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model="scope.row.avgAmount6"
                  type="number"
                  clearable
                  placeholder="透支总额"
                >
                </el-input>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div
          style="margin-top: 30px"
          v-for="(item, index) in creditDebtLoanList"
          :key="index + 'b'"
        >
          <div class="table-top-title">
            <span>{{ item.title }}</span>
          </div>

          <el-table size="mini" :data="[item]" border>
            <el-table-column align="center" label="发卡机构数">
              <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model="scope.row.hairClipCount"
                  type="number"
                  clearable
                  placeholder="发卡机构数"
                >
                </el-input>
              </template>
            </el-table-column>
            <el-table-column align="center" label="账户数">
              <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model="scope.row.accountCount"
                  type="number"
                  clearable
                  placeholder="账户数"
                >
                </el-input>
              </template>
            </el-table-column>
            <el-table-column align="center" label="授信总额">
              <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model="scope.row.creditAmount"
                  type="number"
                  clearable
                  placeholder="授信总额"
                >
                </el-input>
              </template>
            </el-table-column>
            <el-table-column align="center" label="单家机构最高授信额">
              <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model="scope.row.maxAmount"
                  type="number"
                  clearable
                  placeholder="单家机构最高授信额"
                >
                </el-input>
              </template>
            </el-table-column>
            <el-table-column align="center" label="单家机构最低授信额">
              <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model="scope.row.minAmount"
                  type="number"
                  clearable
                  placeholder="单家机构最低授信额"
                >
                </el-input>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              :label="
                item.titleType == 'creditAccount' ? '已用额度' : '透支额度'
              "
            >
              <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model="scope.row.usedAmount"
                  type="number"
                  clearable
                  :placeholder="
                    '请输入' + item.titleType == 1 ? '已用额度' : '透支额度'
                  "
                >
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="最近6个月平均应还款" align="center">
              <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model="scope.row.avgAmount6"
                  type="number"
                  clearable
                  placeholder="最近6个月平均应还款"
                >
                </el-input>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="margin-top: 20px" class="table-top-title">
          相关还款责任信息汇总
        </div>
        <div style=" width: 100%; display: flex; flex-wrap: wrap">
          <div
            style="width: 50%; margin-bottom: 20px"
            v-for="(item, index) in creditDebtDutyList"
            :key="index + 'c'"
          >
            <div>
              <div class="table-top-title">
                <span>{{
                  `${
                    item.dutyType == "guarantee"
                      ? "担保责任"
                      : "其它相关还款责任"
                  }` +
                    "-" +
                    `${item.type == "company" ? "为企业" : "为个人"}`
                }}</span>
              </div>

              <div>
                <el-table size="mini" :data="[item]" border>
                  <el-table-column align="center" label="账户数">
                    <template slot-scope="scope">
                      <el-input
                        size="small"
                        v-model="scope.row.accountCount"
                        type="number"
                        clearable
                        placeholder="账户数"
                      >
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    :label="
                      `${
                        item.dutyType == 'guarantee'
                          ? '担保责任金额'
                          : '其它还款责任金额'
                      }`
                    "
                  >
                    <template slot-scope="scope">
                      <el-input
                        v-model="scope.row.dutyAmount"
                        type="number"
                        size="small"
                        clearable
                        placeholder="还款责任金额"
                      >
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="余额">
                    <template slot-scope="scope">
                      <el-input
                        size="small"
                        v-model="scope.row.balance"
                        type="number"
                        clearable
                        placeholder="余额"
                      >
                      </el-input>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </div>
      </el-card>
      <!--      查询记录概要-->
      <el-card class="suffi" style="margin-top: 20px; padding-right: 160px">
        <div style="margin: 10px 0">查询记录概要</div>
        <div style="width: 100%; display: flex">
          <div style="width: 20%">
            <div class="table-top-title">
              <span>最近1个月内的查询机构数</span>
            </div>
            <el-table size="mini" :data="oneMonthdictNum" border>
              <el-table-column align="center" label="贷款审批">
                <template slot-scope="scope">
                  <el-input
                    size="small"
                    v-model="scope.row.loanApprovalDept"
                    type="number"
                    clearable
                    placeholder="贷款审批"
                  >
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" label="信用卡审批">
                <template slot-scope="scope">
                  <el-input
                    size="small"
                    v-model="scope.row.cardApprovalDept"
                    type="number"
                    clearable
                    placeholder="信用卡审批"
                  >
                  </el-input>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div style="width: 40%">
            <div class="table-top-title">
              <span>最近1个月内的查询次数</span>
            </div>
            <el-table size="mini" :data="oneMonthsearchNum" border>
              <el-table-column align="center" label="贷款审批">
                <template slot-scope="scope">
                  <el-input
                    size="small"
                    v-model="scope.row.loanApprovalNum"
                    type="number"
                    clearable
                    placeholder="贷款审批"
                  >
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" label="信用卡审批">
                <template slot-scope="scope">
                  <el-input
                    size="small"
                    v-model="scope.row.cardApprovalNum"
                    type="number"
                    clearable
                    placeholder="信用卡审批"
                  >
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column label="本人查询" align="center">
                <template slot-scope="scope">
                  <el-input
                    size="small"
                    v-model="scope.row.ownQueryNum"
                    type="number"
                    clearable
                    placeholder="本人查询"
                  >
                  </el-input>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div style="width: 40%">
            <div class="table-top-title">
              <span>最近2年内的查询机构数</span>
            </div>
            <el-table size="mini" :data="twoYearSearchNum" border>
              <el-table-column align="center" label="贷后管理">
                <template slot-scope="scope">
                  <el-input
                    size="small"
                    v-model="scope.row.loanManage"
                    type="number"
                    clearable
                    placeholder="贷款审批"
                  >
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" label="担保资格审查">
                <template slot-scope="scope">
                  <el-input
                    size="small"
                    v-model="scope.row.guaranteeQualification"
                    type="number"
                    clearable
                    placeholder="信用卡审批"
                  >
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column label="特约商户实名审查" align="center">
                <template slot-scope="scope">
                  <el-input
                    size="small"
                    v-model="scope.row.merchantApproval"
                    type="number"
                    clearable
                    placeholder="本人查询"
                  >
                  </el-input>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div style="margin: 10px 0">查询次数</div>
        <div style="width: 100%; display: flex">
          <el-table size="mini" :data="creditQueryCounts" border>
            <el-table-column label="查询身份" align="center">
              <template slot-scope="scope">
                {{ scope.row.standType == 1 ? "机构查询" : "本人查询" }}
              </template>
            </el-table-column>
            <el-table-column label="1个月查询次数" align="center">
              <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model="scope.row.monthQueryCount1"
                  type="number"
                  placeholder="一个月查询次数"
                >
                  <template slot="suffix"
                    ><span style="color: #000">次</span></template
                  >
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="2个月查询次数" align="center">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.monthQueryCount2"
                  type="number"
                  size="small"
                  placeholder="两个月查询次数"
                >
                  <template slot="suffix"
                    ><span style="color: #000">次</span></template
                  >
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="3个月查询次数" align="center">
              <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model="scope.row.monthQueryCount3"
                  type="number"
                  placeholder="三个月查询次数"
                  ><template slot="suffix"
                    ><span style="color: #000">次</span></template
                  >
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="6个月查询次数" align="center">
              <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model="scope.row.monthQueryCount6"
                  type="number"
                  placeholder="四个月查询次数"
                >
                  <template slot="suffix"
                    ><span style="color: #000">次</span></template
                  >
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="12个月查询次数" align="center">
              <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model="scope.row.monthQueryCount12"
                  type="number"
                  placeholder="12个月查询次数"
                >
                  <template slot="suffix"
                    ><span style="color: #000">次</span></template
                  >
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="24个月查询次数" align="center">
              <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model="scope.row.monthQueryCount24"
                  type="number"
                  placeholder="24个月查询次数"
                >
                  <template slot="suffix"
                    ><span style="color: #000">次</span></template
                  >
                </el-input>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
      <el-card class="suffi" style="margin-top: 20px; padding-right: 160px">
        <div style="margin: 10px 0">
          个人逾期情况
          <el-tooltip
            effect="dark"
            content="N:正常(借款人已经按时归还该切应还金额的全部);1:逾期1-30天;2:逾期31-60天;3:逾期61-90天;4:逾期91-120天;5:逾期121-150天;6:逾期151-180天;7:逾期180天以上"
            placement="top"
          >
            <i class="el-icon-info"></i>
          </el-tooltip>
        </div>

        <el-table :data="creditPersonOverdues" border>
          <el-table-column label="逾期时间" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.lastType == 1">近3个月</span>
              <span v-if="scope.row.lastType == 2">近6个月</span>
              <span v-if="scope.row.lastType == 3">近1年</span>
              <span v-if="scope.row.lastType == 4">近2年</span
              ><span v-if="scope.row.lastType == 5">近3年</span>
              <span v-if="scope.row.lastType == 6">近5年</span>
              <span v-if="scope.row.lastType == 7">累计</span>
            </template>
          </el-table-column>
          <el-table-column label="还款状态“1”" align="center">
            <template slot-scope="scope">
              <el-input
                size="small"
                v-model="scope.row.statusCount1"
                type="number"
                placeholder="请输入"
              >
                <template slot="suffix"
                  ><span style="color: #000">次</span></template
                >
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="还款状态“2”" align="center">
            <template slot-scope="scope">
              <el-input
                size="small"
                v-model="scope.row.statusCount2"
                type="number"
                placeholder="请输入"
              >
                <template slot="suffix"
                  ><span style="color: #000">次</span></template
                >
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="还款状态“3”" align="center">
            <template slot-scope="scope">
              <el-input
                size="small"
                v-model="scope.row.statusCount3"
                type="number"
                placeholder="请输入"
              >
                <template slot="suffix"
                  ><span style="color: #000">次</span></template
                >
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="还款状态“4”" align="center">
            <template slot-scope="scope">
              <el-input
                size="small"
                v-model="scope.row.statusCount4"
                type="number"
                placeholder="请输入"
              >
                <template slot="suffix"
                  ><span style="color: #000">次</span></template
                >
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="还款状态“5”" align="center">
            <template slot-scope="scope">
              <el-input
                size="small"
                v-model="scope.row.statusCount5"
                type="number"
                placeholder="请输入"
              >
                <template slot="suffix"
                  ><span style="color: #000">次</span></template
                >
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="还款状态“6”" align="center">
            <template slot-scope="scope">
              <el-input
                size="small"
                v-model="scope.row.statusCount6"
                type="number"
                placeholder="请输入"
              >
                <template slot="suffix"
                  ><span style="color: #000">次</span></template
                >
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="还款状态“7”" align="center">
            <template slot-scope="scope">
              <el-input
                size="small"
                v-model="scope.row.statusCount7"
                type="number"
                placeholder="请输入"
              >
                <template slot="suffix"
                  ><span style="color: #000">次</span></template
                >
              </el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-card style="margin-top: 20px;padding-right: 160px">
        <div class="message-box">
          <el-form
            :model="form"
            size="small"
            label-width="150px"
            style="margin-top: 20px"
            :rules="rules"
            ref="formRef"
          >
            <el-form-item label="个人负债金额：">
              <el-input
                min="0"
                v-model="form.personDebt"
                type="number"
                style="width: 500px"
                placeholder="请输入个人负债金额"
              >
                <template slot="suffix"
                  ><span style="color: #000">元</span></template
                >
              </el-input>
            </el-form-item>
            <el-form-item label="网贷笔数：">
              <el-input
                min="0"
                v-model="form.network"
                type="number"
                style="width: 500px"
                placeholder="请输入网贷笔数"
              >
                <template slot="suffix"
                  ><span style="color: #000">笔</span></template
                >
              </el-input>
            </el-form-item>
            <el-form-item label="个人逾期金额：">
              <el-input
                min="0"
                v-model="form.personOverDebt"
                type="number"
                style="width: 500px"
                placeholder="请输入个人逾期金额"
              >
                <template slot="suffix"
                  ><span style="color: #000">元</span></template
                >
              </el-input>
            </el-form-item>
            <!-- <el-form-item label="有无连三累六：" prop="threeSixStatus">
              <el-select
                clearable
                style="width: 500px"
                v-model="form.threeSixStatus"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in threeSixStatusList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item label="账户状态：" prop="accountStatus">
              <el-select
                multiple
                clearable
                style="width: 500px"
                v-model="form.accountStatus"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in accountList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="五级分类：" prop="fiveTypeStatus">
              <el-select
                multiple
                clearable
                style="width: 500px"
                v-model="form.fiveTypeStatus"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in custom_cate_type"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="是否为白户：">
              <el-radio-group v-model="form.whiteStatus">
                <el-radio
                  v-for="(item, index) in system_yes_noList"
                  :key="index"
                  :label="item.value"
                  >{{ item.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
            <el-form-item label="婚姻状况：">
              <el-radio-group v-model="form.maritalStatus">
                <el-radio
                  v-for="(item, index) in system_yes_noList"
                  :key="index"
                  :label="item.value"
                  >{{ item.value == 0 ? "未婚" : "已婚" }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
            <el-form-item label="个人逾期情况：">
              <el-radio-group v-model="form.personOverStatus">
                <el-radio
                  v-for="(item, index) in system_yes_noList"
                  :key="index"
                  :label="item.value"
                  >{{ item.value == 0 ? "否" : "是" }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
            <!-- <el-form-item label="授信机构数：">
              <el-input
                min="0"
                clearable
                v-model="form.creditCount"
                type="number"
                style="width: 500px"
                placeholder="请输入授信机构数"
              >
              </el-input>
            </el-form-item> -->
            <!-- <el-form-item label="授信总金额：">
              <el-input
                min="0"
                v-model="form.creditAmount"
                type="number"
                style="width: 500px"
                placeholder="请输入授信金额"
              >
                <template slot="suffix"
                  ><span style="color: #000">元</span></template
                >
              </el-input>
            </el-form-item> -->
          </el-form>
        </div>
      </el-card>
    </div>

    <div
      style="
        background-color: #fff;
        width: calc(100% - 40px);
        height: 60px;
        line-height: 60px;
        position: absolute;
        bottom: 10px;
        text-align: center;
      "
    >
      <el-button
        :disabled="saveBtnFlag"
        style="width: 150px"
        @click="submitForm('formRef')"
        >保存</el-button
      >
      <el-button
        :disabled="isentered == 0"
        @click="systemMatch()"
        style="width: 150px"
        type="primary"
        >系统匹配</el-button
      >
    </div>

    <el-dialog
      :visible.sync="dialogVisible"
      width="400px"
      :before-close="handleClose"
    >
      <div slot="title" style="text-align: center; font-weight: bold">
        系统匹配
      </div>
      <div style="color: #222; line-height: 28px">
        请确认征信信息是否填写完整，点击确认后系统会
        根据填写的征信信息匹配出适合推荐的产品
      </div>
      <div style="text-align: center; margin-top: 20px">
        <el-button
          style="width: 90px"
          size="mini"
          type="primary"
          @click="submitSystem()"
          >确认</el-button
        >
        <el-button
          style="width: 90px"
          size="mini"
          @click="dialogVisible = false"
          >取消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  rules,
  basicReporter,
  creditTradingList,
  creditOverdueList,
  creditDebtLoopList,
  creditDebtLoanList,
  creditDebtDutyList,
  oneMonthdictNum,
  oneMonthsearchNum,
  twoYearSearchNum,
  creditQueryCounts,
  creditPersonOverdues
} from "../options";
const form = {
  personDebt: null,
  network: null,
  personOverDebt: null, //个人逾期金额
  threeSixStatus: null,
  accountStatus: null,
  fiveTypeStatus: null,
  whiteStatus: "0",
  creditCount: null,
  creditAmount: null,
  maritalStatus: "0",
  personOverStatus: "0"
};
import { checkFile } from "@/api/system";
import * as download from "@/utils/downloadFile";
import {
  getCreditInfo,
  getCreditInfoTask,
  getCreditInfoTaskStatus,
  getCreditInfoTaskResult,
  addCreditInfo,
  matchingProductPrecision
} from "@/api/customer";
import basicInfo from "./components/basicInfo.vue";
export default {
  computed: {
    basicInfo() {
      return basicInfo;
    }
  },
  data() {
    return {
      rules,
      dialogVisible: false,
      haveMsgbtnFlag: true,
      saveBtnFlag: false,
      editTaskdesable: false,
      taskId: "",
      taskTimeId: null,
      form: Object.assign({}, form),
      showLoading: false,
      noHaveList: [],
      system_n_aList: [],
      system_yes_noList: [],
      custom_cate_type: [],
      accountList: [],
      threeSixStatusList: [],
      imgList: [],
      canpamyName: "",
      creditUrl: "",
      creditUrlName: "",
      creditId: "",
      basicReporter,
      creditTradingList,
      creditOverdueList,
      creditDebtLoopList, //信贷交易授信及负债信息概要（未结清/未销户）
      creditDebtLoanList,
      creditDebtDutyList,
      oneMonthdictNum,
      oneMonthsearchNum,
      twoYearSearchNum,
      creditQueryCounts,
      creditPersonOverdues,
      creditTaskLoading: false,
      isentered: null
    };
  },
  async mounted() {
    this.$refs.formRef.resetFields();
  },
  async created() {
    this.init();
  },
  beforeDestroy() {
    clearInterval(this.taskTimeId);
  },
  methods: {
    async init() {
      this.showLoading = true;
      const p1 = this.$getDictData("system_n_a");
      const p2 = this.$getDictData("system_yes_no");
      const p3 = this.$getDictData("custom_cate_type");
      const p4 = this.$getDictData("account");
      const p5 = this.$getDictData("person_over_status");
      this.canpamyName = this.$route.query.canpamyName;
      Promise.all([p1, p2, p3, p4, p5]).then(res => {
        console.log("res", res);
        this.system_n_aList = res[0];
        this.system_yes_noList = res[1];
        this.custom_cate_type = res[2];
        this.accountList = res[3];
        this.threeSixStatusList = res[4];
        this.getInfo();
      });
    },
    submitSystem() {
      let params = {
        id: this.$route.query.id,
        type: this.$route.query.machType
      };
      matchingProductPrecision(params).then(res => {
        if (res.code == 200) {
          this.$message({
            message: "匹配成功",
            type: "success"
          });
          this.dialogVisible = false;
          setTimeout(() => {
            this.$router.back();
          }, 1000);
        }
      });
    },
    systemMatch() {
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    creditTask() {
      let params = {
        creditId: this.creditId,
        file: this.creditUrl
      };
      getCreditInfoTask(params)
        .then(res => {
          console.log(res);
          if (res.data) {
            this.taskId = res.data.task_id;
            this.creditTaskLoading = true; //创建任务后loading
            this.getTask(); // 开始轮询
          }
        })
        .finally(() => {});
    },
    //轮询任务
    getTask() {
      this.taskTimeId = setInterval(() => {
        getCreditInfoTaskStatus(this.taskId).then(res => {
          if (res.data.resultStatus == 1) {
            // 状态对了
            clearInterval(this.taskTimeId);
            this.haveMsgbtnFlag = false;
            this.creditTaskLoading = false; // 状态对的时候在取消loading
            this.editTaskdesable = false; // 状态对的时候不用禁用识别征信填写
          } else {
            // 状态不对
            this.creditTaskLoading = true; // 创建任务继续loading
            this.editTaskdesable = true; //状态不对的时候 禁用识别征信填写
          }
        });
      }, 3000);
    },
    editTask() {
      this.showLoading = true;
      let params = {
        creditId: this.creditId,
        taskId: this.taskId
      };
      getCreditInfoTaskResult(params)
        .then(res => {
          console.log(res);
          this.basicReporter = [
            {
              name: res.data.creditBaseInfo.name,
              idCard: res.data.creditBaseInfo.idCard,
              queryAgency: res.data.creditBaseInfo.queryAgency,
              queryReason: res.data.creditBaseInfo.queryReason,
              reportTime: res.data.creditBaseInfo.reportTime
            }
          ];
          if (res.data.creditTradingList.length > 0) {
            this.creditTradingList = res.data.creditTradingList;
          }
          if (res.data.creditOverdueList.length > 0) {
            this.creditOverdueList = res.data.creditOverdueList;
          }
          if (res.data.creditQueryCounts.length > 0) {
            this.creditQueryCounts = res.data.creditQueryCounts;
          }

          if (res.data.creditDebtInfo.creditDebtDutyList.length > 0) {
            this.creditDebtDutyList =
              res.data.creditDebtInfo.creditDebtDutyList;
          }
          if (res.data.creditDebtInfo.creditDebtLoanList.length > 0) {
            this.creditDebtLoanList =
              res.data.creditDebtInfo.creditDebtLoanList;
          }
          if (res.data.creditDebtInfo.creditDebtLoopList.length > 0) {
            this.creditDebtLoopList =
              res.data.creditDebtInfo.creditDebtLoopList;
          }
          this.oneMonthdictNum = [
            {
              loanApprovalDept:
                res.data.creditSummaryRecordDto.loanApprovalDept || "",
              cardApprovalDept:
                res.data.creditSummaryRecordDto.cardApprovalDept || ""
            }
          ];
          this.oneMonthsearchNum = [
            {
              loanApprovalNum:
                res.data.creditSummaryRecordDto.loanApprovalNum || "",
              cardApprovalNum:
                res.data.creditSummaryRecordDto.cardApprovalNum || "",
              ownQueryNum: res.data.creditSummaryRecordDto.ownQueryNum || ""
            }
          ];
          this.twoYearSearchNum = [
            {
              loanManage: res.data.creditSummaryRecordDto.loanManage,
              guaranteeQualification:
                res.data.creditSummaryRecordDto.guaranteeQualification,
              merchantApproval: res.data.creditSummaryRecordDto.merchantApproval
            }
          ];
          this.showLoading = false;

          this.saveBtnFlag = false;
        })
        .finally(() => {
          this.showLoading = false;
          this.saveBtnFlag = false;
        });
    },
    downLoadFile() {
      const path = require("path");
      checkFile({
        filePath: this.creditUrl
      }).then(res => {
        if (res.data) {
          download.downloadFile(`${path.basename(this.creditUrl)}`, {
            filePath: this.creditUrl
          });
        } else {
          this.$message({
            message: "暂无文件",
            type: "warning"
          });
        }
      });
    },
    funUrl(url) {
      console.log(
        url
          .split("/")
          .slice(3)
          .join("/")
      );
    },
    getInfo() {
      if (this.$route.query.machType && this.$route.query.id) {
        let params = {
          matchId: this.$route.query.id,
          matchType: this.$route.query.machType
        };
        getCreditInfo(params)
          .then(res => {
            const taskId = res.data.taskId;
            const resultStatus = res.data.taskResultStatus;
            this.taskId = taskId;
            if (taskId) {
              if (resultStatus == 0) {
                this.taskId = taskId;
                this.getTask(); //轮询
                this.haveMsgbtnFlag = true;
              } else {
                this.haveMsgbtnFlag = false;
              }
            }
            if (res.data.creditBaseInfo.creditUrl) {
              this.creditUrlName = res.data.creditBaseInfo.creditUrl
                .split("/")
                .slice(3)
                .join("/");
              this.funUrl(res.data.creditBaseInfo.creditUrl);
            }
            this.creditUrl = res.data.creditBaseInfo.creditUrl;
            this.creditId = res.data.creditId;
            this.isentered = res.data.creditBaseInfo.entered;
            this.basicReporter = [
              {
                name: res.data.creditBaseInfo.name,
                idCard: res.data.creditBaseInfo.idCard,
                queryAgency: res.data.creditBaseInfo.queryAgency,
                queryReason: res.data.creditBaseInfo.queryReason,
                reportTime: res.data.creditBaseInfo.reportTime
              }
            ];
            // console.log(this.creditTradingList);
            // console.log(Array.isArray(res.data.creditTradingList));
            if (res.data.creditTradingList.length > 0) {
              this.creditTradingList = res.data.creditTradingList;
            }

            if (res.data.creditOverdueList.length > 0) {
              this.creditOverdueList = res.data.creditOverdueList;
            }
            if (res.data.creditDebtInfo.creditDebtLoopList.length > 0) {
              this.creditDebtLoopList =
                res.data.creditDebtInfo.creditDebtLoopList;
            }
            if (res.data.creditDebtInfo.creditDebtLoanList.length > 0) {
              this.creditDebtLoanList =
                res.data.creditDebtInfo.creditDebtLoanList;
            }
            if (res.data.creditDebtInfo.creditDebtDutyList.length > 0) {
              this.creditDebtDutyList =
                res.data.creditDebtInfo.creditDebtDutyList;
            }
            if (res.data.creditPersonOverdues.length > 0) {
              this.creditPersonOverdues = res.data.creditPersonOverdues;
            }
            if (res.data.creditQueryCounts.length > 0) {
              this.creditQueryCounts = res.data.creditQueryCounts;
            }

            this.oneMonthdictNum = [
              {
                loanApprovalDept:
                  res.data.creditSummaryRecordDto.loanApprovalDept || "",
                cardApprovalDept:
                  res.data.creditSummaryRecordDto.cardApprovalDept || ""
              }
            ];
            this.oneMonthsearchNum = [
              {
                loanApprovalNum:
                  res.data.creditSummaryRecordDto.loanApprovalNum || "",
                cardApprovalNum:
                  res.data.creditSummaryRecordDto.cardApprovalNum || "",
                ownQueryNum: res.data.creditSummaryRecordDto.ownQueryNum || ""
              }
            ];
            this.twoYearSearchNum = [
              {
                loanManage: res.data.creditSummaryRecordDto.loanManage,
                guaranteeQualification:
                  res.data.creditSummaryRecordDto.guaranteeQualification,
                merchantApproval:
                  res.data.creditSummaryRecordDto.merchantApproval
              }
            ];
            if (res.data.creditBaseInfo.fiveTypeStatus) {
              res.data.creditBaseInfo.fiveTypeStatus = res.data.creditBaseInfo.fiveTypeStatus.split(
                ","
              );
            } else {
              res.data.creditBaseInfo.fiveTypeStatus = null;
            }
            if (res.data.creditBaseInfo.accountStatus) {
              res.data.creditBaseInfo.accountStatus = res.data.creditBaseInfo.accountStatus.split(
                ","
              );
            } else {
              res.data.creditBaseInfo.accountStatus = null;
            }
            this.form = Object.assign({}, res.data.creditBaseInfo);
            if (res.data.creditBaseInfo.entered == 1) {
              this.saveBtnFlag = false;
            } else {
              this.saveBtnFlag = true;
            }
            this.showLoading = false;
          })
          .finally(() => {
            this.showLoading = false;
          });
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        console.log(this.form);

        if (
          this.form.accountStatus === null ||
          this.form.accountStatus.length === 0
        ) {
          return this.$message.error("请选择用户状态");
        }

        if (
          this.form.fiveTypeStatus === null ||
          this.form.fiveTypeStatus.length === 0
        ) {
          return this.$message.error("请选择五级分类");
        }

        if (valid) {
          let creditBaseInfo = Object.assign(
            {},
            this.form,
            this.basicReporter[0]
          );

          if (creditBaseInfo.accountStatus.length > 0) {
            creditBaseInfo.accountStatus = creditBaseInfo.accountStatus.join(
              ","
            );
          }
          if (creditBaseInfo.fiveTypeStatus.length > 0) {
            creditBaseInfo.fiveTypeStatus = creditBaseInfo.fiveTypeStatus.join(
              ","
            );
          }
          console.log(creditBaseInfo);
          // return
          const params = {
            matchId: this.$route.query.id,
            matchType: this.$route.query.machType,
            creditBaseInfo,
            creditQueryCounts: this.creditQueryCounts,
            creditPersonOverdues: this.creditPersonOverdues,
            creditTradingList: this.creditTradingList,
            creditOverdueList: this.creditOverdueList,
            creditDebtInfo: {
              creditDebtLoopList: this.creditDebtLoopList,
              creditDebtLoanList: this.creditDebtLoanList,
              creditDebtDutyList: this.creditDebtDutyList
            },
            creditSummaryRecordDto: {
              ...this.oneMonthdictNum[0],
              ...this.oneMonthsearchNum[0],
              ...this.twoYearSearchNum[0]
            }
          };
          addCreditInfo(params).then(res => {
            console.log(res);
            this.$message({
              message: "保存成功",
              type: "success"
            });
            setTimeout(() => {
              this.getInfo();
            }, 1000);
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  height: calc(100vh - 50px);
  background-color: #f5f5f5;
  position: relative;
}
.form-card {
  height: calc(100% - 60px);
  overflow-y: scroll;
  .campany-title {
    display: flex;
    align-items: center;
  }
}

.form-main {
  height: calc(
    100% - 80px
  ); /* 将高度设置为父级容器高度减去上方固定元素的高度 */
  overflow-y: auto;
}
.file-box {
  .file-box-title {
    font-weight: bold;
    font-size: 16px;
  }
  .file-box-content {
    margin-top: 10px;
    display: flex;
    .file-left {
      width: 300px;
      height: 100px;
      //line-height: 100px;
      background-color: #fff1f1;
      border-radius: 8px;
      margin-right: 30px;
      display: flex;

      .file-image {
        margin-top: 25px;
        width: 50px;
        height: 50px;
        //background-color: deeppink;
        margin-left: 30px;
        margin-right: 10px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .file-msg {
        margin-top: 30px;
        height: 50px;
        > div {
          color: #000;
          &:nth-child(1) {
            font-size: 14px;
          }
          &:nth-child(2) {
            margin-top: 10px;
            font-size: 12px;
          }
        }
      }
    }
    .file-right {
      padding: 15px 0;
      .doloadFile {
        width: 108px;
        height: 32px;
        border-radius: 4px;
        background: #d1e8ff;
        color: #409eff;
        line-height: 32px;
        font-size: 14px;
        text-align: center;
        cursor: pointer;
      }
    }
  }
}

/deep/.suffi .el-input__suffix-inner {
  > span {
    display: inline-block;
    margin-top: 5px !important;
  }
}
.table-top-title {
  text-align: center;
  border: 1px solid #eee;
  border-bottom: none;
  height: 44px;

  line-height: 44px;
  color: #222;
  > span {
    font-size: 16px;
    font-weight: 500;
  }
}

/deep/ .el-dialog__body {
  padding: 0 30px 30px;
}
//.img-box {
//  margin: 20px 0;
//  display: flex;
//  flex-wrap: wrap;
//}
//.title-msg {
//  //margin-top: 20px;
//  font-size: 16px;
//  font-weight: 500;
//
//  color: #222222;
//}
</style>
